<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>编辑导航</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  {include file="public/css"/}
	<link href="__STATIC__/imgsrc/designer.css" rel="stylesheet">
	<style>
	.tabBar{ width:340px; height:50px;background:#fff; border-top:1px #dedede solid;position:absolute;bottom:0}
	.tabBar-tab{ width:100%; text-align:center; padding:0px; margin:0px; table-layout:fixed; }
	.tabBar-tab td{ border:none;  margin:0px; text-align:center; padding:5px 0 1px 0;display: table-cell;cursor:pointer}
	.tabBar-tab td img{ width:24px; height:24px; margin:0 auto; }
	.tabBar-tab td span{ display:block; width:100%; height:18px; line-height:18px; font-size:12px; }
	</style>
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card layui-col-md12">
					<div class="layui-card-header">
						{if !$info['id']}<i class="fa fa-plus"></i> 添加导航{else}<i class="fa fa-pencil"></i> 编辑导航{/if}
						<i class="layui-icon layui-icon-close" style="font-size:18px;font-weight:bold;cursor:pointer" onclick="closeself()"></i>
					</div>
          <div class="layui-card-body layui-col-md12" pad15 ng-app="myApp" ng-controller="personCtrl">
						<div class="dsn-phone">
							<div class="dsn-phone-left"></div>
							<div class="dsn-phone-center">
								<div class="dsn-phone-top"></div>
								<div class="dsn-phone-main">
									<div id="editor">
										<div class="dsn-mod dsn-topbar dsn-mod-nohover" style="color:white;background:#333333">
											<div style="float:left;width:100%;font-size:12px">
												<div style="float:left;width:30%">&nbsp;<i class="fa fa-signal"></i> wechat <i class="fa fa-wifi"></i></div>
												<div style="float:left;text-align:center;width:40%">12:00</div>
												<div style="float:left;text-align:right;width:30%">100% <i class="fa fa-battery-full"></i>&nbsp;</div>
											</div>
											<div style="float:left;width:98%;margin:2px 1% 0 1%;">
												<div style="float:left;width:30%">&nbsp;</div>
												<div style="float:left;text-align:center;width:40%;font-size:16px;height:27px;line-height:27px">页面标题</div>
												<!-- <div style="float:right;width:30%;border-radius:20px;width:70px;height: 25px;border:1px solid rgba(255,255,255,0.2);text;text-align:center;overflow:hidden" ng-style="{'border-color':navigationBarTextStyle=='black'?'rgba(0,0,0,0.2)':'rgba(255,255,255,0.2)'}">
													<div style="float:left;width:49%;font-size:17px;height:27px;line-height:27px">
														<div style="float:left;margin-left:2px">&nbsp;&bull;</div>
														<div style="float:left;font-size:27px">&bull;</div>
														<div style="float:left;">&bull;</div>
													</div>
													<div style="float:left;width:2%;"><span style="border-right:1px solid;opacity:0.2;"></span></div>
													<div style="float:right;width:49%;"><i class="fa fa-dot-circle-o" style="font-size:19px;height:25px;line-height:25px"></i></div>
												</div> -->
											</div>
										</div>
										<div id="editor-content">
										<div style="margin-top:200px;font-size:26px;color:#ccc;width:100%;text-align:center">内容显示区域</div>
										<div style="position:absolute;bottom:60px;width:100%;text-align:center;color:#a55">提示：点击右侧菜单名称后的上移进行排序</div>
										<div id="tabBar" class="tabBar" style="overflow:hidden;background:{{backgroundColor}};border-top:1px #e5e5e5 solid;">
											<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabBar-tab">
											<tbody><tr id="sortable">
												<td ng-show="menucount>$index" ng-click="menuselectedchange($index)" data-key="{{ key }}" ng-repeat="(key,thismenu) in menudata track by $index">
													 <img ng-src="{{thismenu.iconPath}}"/>
													 <span style="color:{{thismenu.color}}">{{thismenu.text || '编辑菜单'}}</span>
												</td>
											</tr>
											</tbody></table>
										</div>
										</div>
									</div>
								</div>
								<div class="dsn-phone-bottom"></div>
							</div>
							<div class="dsn-phone-right"></div>
						</div>
						
            <div class="layui-form form-label-w6 layui-col-md7" lay-filter="form">
							<div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline" style="width:400px">
								<label><input type="radio" name="info[platform]" value="all" title="全部" ng-model="platform" {if $info['platform']=='all'}checked{/if}/></label>
									{foreach $platform as $pl}
									<label><input type="radio" name="info[platform]" value="{$pl}" title="{:getplatformname($pl)}" ng-model="platform" {if $info['platform']==$pl}checked{/if}/></label>
									{/foreach}
                </div>
              </div>
							<div class="layui-form-item">
								<label class="layui-form-label">所属页面</label>
								<div class="layui-input-inline" style="width:210px">
									<input type="text" name="indexurl" autocomplete="off" class="layui-input" ng-model="indexurl">
								</div>
								<button class="layui-btn layui-btn-primary" ng-click="chooseUrl('indexurl')" style="float:left">选择链接</button>
								<div class="layui-form-mid layui-word-aux" style="margin-left:10px;">在哪个页面展示该导航菜单</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">页面备注</label>
								<div class="layui-input-inline" style="width:210px">
									<input type="text" name="indexurlname" autocomplete="off" class="layui-input" ng-model="indexurlname">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">菜单背景色</label>
								<div class="layui-input-inline" style="width:134px">
									<input type="text" name="backgroundColor" autocomplete="off" class="layui-input" ng-model="backgroundColor">
								</div>
								<div class="colorpicker" ng-model="backgroundColor"></div>
							</div>
              <div class="layui-form-item">
                <label class="layui-form-label">菜单个数</label>
                <div class="layui-input-inline" style="width:400px">
									<label><input type="radio" name="info[menucount]" value="2" title="两个" ng-model="menucount" {if $info['menucount']==2}checked{/if}/></label>
									<label><input type="radio" name="info[menucount]" value="3" title="三个" ng-model="menucount" {if $info['menucount']==3}checked{/if}/></label>
									<label><input type="radio" name="info[menucount]" value="4" title="四个" ng-model="menucount" {if $info['menucount']==4}checked{/if}/></label>
									<label><input type="radio" name="info[menucount]" value="5" title="五个" ng-model="menucount" {if $info['menucount']==5}checked{/if}/></label>
                </div>
              </div>
							<div ng-show="menucount>0">
								<div class="layui-form-item">
									<label class="layui-form-label">菜单一</label>
									<span class="layui-form-mid">名称</span>
									<div class="layui-input-inline" style="width:160px">
										<input type="text" name="text0" autocomplete="off" class="layui-input" ng-model="menudata[0].text">
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">链接</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="pagePath0" autocomplete="off" class="layui-input" ng-model="menudata[0].pagePath">
										</div>
										<button class="layui-btn layui-btn-primary" ng-click="chooseUrl(0)" style="float:left">选择链接</button>
										<span class="layui-form-mid" style="width:200px;">&nbsp;{{menudata[0].pagePathname}}</span>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">颜色</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="color0" autocomplete="off" class="layui-input" ng-model="menudata[0].color">
										</div>
										<div class="colorpicker" ng-model="menudata[0].color"></div>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">图标</span>
										<button class="layui-btn layui-btn-primary" ng-click="uploadImg(0,1,'')">选择图标</button>
										<img style="width:38px;height:38px;" ng-src="{{menudata[0].iconPath}}"/>
									</div>
								</div>
								<div class="layui-form-item" ng-show="menucount>1">
									<label class="layui-form-label">菜单二</label>
									<span class="layui-form-mid">名称</span>
									<div class="layui-input-inline" style="width:160px">
										<input type="text" name="text1" autocomplete="off" class="layui-input" ng-model="menudata[1].text">
									</div>
									<button class="layui-btn layui-btn-primary" ng-click="goup(1)" style="float:left">上移</button>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">链接</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="pagePath1" autocomplete="off" class="layui-input" ng-model="menudata[1].pagePath">
										</div>
										<button class="layui-btn layui-btn-primary" ng-click="chooseUrl(1)" style="float:left">选择链接</button>
										<span class="layui-form-mid" style="width:200px;">&nbsp;{{menudata[1].pagePathname}}</span>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">颜色</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="color1" autocomplete="off" class="layui-input" ng-model="menudata[1].color">
										</div>
										<div class="colorpicker" ng-model="menudata[1].color"></div>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">图标</span>
										<button class="layui-btn layui-btn-primary" ng-click="uploadImg(1,1,'')">选择图标</button>
										<img style="width:38px;height:38px;" ng-src="{{menudata[1].iconPath}}"/>
									</div>
								</div>
								<div class="layui-form-item" ng-show="menucount>2">
									<label class="layui-form-label">菜单三</label>
									<span class="layui-form-mid">名称</span>
									<div class="layui-input-inline" style="width:160px">
										<input type="text" name="text2" autocomplete="off" class="layui-input" ng-model="menudata[2].text">
									</div>
									<button class="layui-btn layui-btn-primary" ng-click="goup(2)" style="float:left">上移</button>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">链接</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="pagePath2" autocomplete="off" class="layui-input" ng-model="menudata[2].pagePath">
										</div>
										<button class="layui-btn layui-btn-primary" ng-click="chooseUrl(2)" style="float:left">选择链接</button>
										<span class="layui-form-mid" style="width:200px;">&nbsp;{{menudata[2].pagePathname}}</span>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">颜色</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="color2" autocomplete="off" class="layui-input" ng-model="menudata[2].color">
										</div>
										<div class="colorpicker" ng-model="menudata[2].color"></div>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">图标</span>
										<button class="layui-btn layui-btn-primary" ng-click="uploadImg(2,1,'')">选择图标</button>
										<img style="width:38px;height:38px;" ng-src="{{menudata[2].iconPath}}"/>
									</div>
								</div>
								<div class="layui-form-item" ng-show="menucount>3">
									<label class="layui-form-label">菜单四</label>
									<span class="layui-form-mid">名称</span>
									<div class="layui-input-inline" style="width:160px">
										<input type="text" name="text3" autocomplete="off" class="layui-input" ng-model="menudata[3].text">
									</div>
									<button class="layui-btn layui-btn-primary" ng-click="goup(3)" style="float:left">上移</button>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">链接</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="pagePath3" autocomplete="off" class="layui-input" ng-model="menudata[3].pagePath">
										</div>
										<button class="layui-btn layui-btn-primary" ng-click="chooseUrl(3)" style="float:left">选择链接</button>
										<span class="layui-form-mid" style="width:200px;">&nbsp;{{menudata[3].pagePathname}}</span>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">颜色</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="color3" autocomplete="off" class="layui-input" ng-model="menudata[3].color">
										</div>
										<div class="colorpicker" ng-model="menudata[3].color"></div>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">图标</span>
										<button class="layui-btn layui-btn-primary" ng-click="uploadImg(3,1,'')">选择图标</button>
										<img style="width:38px;height:38px;" ng-src="{{menudata[3].iconPath}}"/>
									</div>
								</div>
								<div class="layui-form-item" ng-show="menucount>4">
									<label class="layui-form-label">菜单五</label>
									<span class="layui-form-mid">名称</span>
									<div class="layui-input-inline" style="width:160px">
										<input type="text" name="text4" autocomplete="off" class="layui-input" ng-model="menudata[4].text">
									</div>
									<button class="layui-btn layui-btn-primary" ng-click="goup(4)" style="float:left">上移</button>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">链接</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="pagePath4" autocomplete="off" class="layui-input" ng-model="menudata[4].pagePath">
										</div>
										<button class="layui-btn layui-btn-primary" ng-click="chooseUrl(4)" style="float:left">选择链接</button>
										<span class="layui-form-mid" style="width:200px;">&nbsp;{{menudata[4].pagePathname}}</span>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">颜色</span>
										<div class="layui-input-inline" style="width:210px">
											<input type="text" name="color4" autocomplete="off" class="layui-input" ng-model="menudata[4].color">
										</div>
										<div class="colorpicker" ng-model="menudata[4].color"></div>
									</div>
									<div style="float: left;clear: both;padding-left: 130px;margin-top:5px">
										<span class="layui-form-mid">图标</span>
										<button class="layui-btn layui-btn-primary" ng-click="uploadImg(4,1,'')">选择图标</button>
										<img style="width:38px;height:38px;" ng-src="{{menudata[4].iconPath}}"/>
									</div>
								</div>
							</div>
							
              <div class="layui-form-item">
								<label class="layui-form-label"></label>
                <div class="layui-input-block">
                  <button class="layui-btn" ng-click="save(0)">保存</button>
                  <!-- <button class="layui-btn" ng-click="save(1)">打包下载</button> -->
                </div>
              </div>
            </div>

						
						
            
          </div>
        </div>
      </div>
    </div>
  </div>
	{include file="public/js"/}
	<script src="__STATIC__/admin/js/jscolor.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/js/angular.min.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/js/angular-ueditor.js"></script>
	
	<script>
	var app = angular.module('myApp', ['ng.ueditor']);
	app.controller('personCtrl', function($scope) {
			$scope.indexurl = '{$info.indexurl}';
			$scope.indexurlname = '{$info.indexurlname}';
			$scope.platform = '{$info.platform}';
			$scope.menucount = {$info.menucount};
			$scope.backgroundColor = '{$info.backgroundColor}';
			$scope.menudata = {$info.menudata},
			$scope.uploadImg = function(Mid,type,params){
				fileUploader.show(function(data){
					if(type==1){
						$scope.menudata[Mid].iconPath = data['url'] + params;
					}else{
						$scope.menudata[Mid].selectedIconPath = data['url'] + params;
					}
					$scope.$apply();
				}, {type :'image',maxheight:110,maxwidth:110});
			},
			$scope.chooseUrl = function(Mid){
				$('#floating-link').attr({"Mid":Mid});
				layer.open({type:2,shadeClose:true,area:['1100px', '650px'],'title':'选择链接',content:"{:url('DesignerPage/chooseurl')}/args/"+Mid})
			},
			$scope.goup = function(key){
				var oldlist = $scope.menudata
				var newlist = [];
				if(key==1){
					newlist.push(oldlist[1]);
					newlist.push(oldlist[0]);
					newlist.push(oldlist[2]);
					newlist.push(oldlist[3]);
					newlist.push(oldlist[4]);
				}
				if(key==2){
					newlist.push(oldlist[0]);
					newlist.push(oldlist[2]);
					newlist.push(oldlist[1]);
					newlist.push(oldlist[3]);
					newlist.push(oldlist[4]);
				}
				if(key==3){
					newlist.push(oldlist[0]);
					newlist.push(oldlist[1]);
					newlist.push(oldlist[3]);
					newlist.push(oldlist[2]);
					newlist.push(oldlist[4]);
				}
				if(key==4){
					newlist.push(oldlist[0]);
					newlist.push(oldlist[1]);
					newlist.push(oldlist[2]);
					newlist.push(oldlist[4]);
					newlist.push(oldlist[3]);
				}
				$scope.menudata = newlist
			}
			$scope.chooseLink = function(urlname,url,args){
				var Mid = args
				if(url){
					if(Mid == 'indexurl'){
						$scope.indexurl = url
						$scope.indexurlname = urlname
					}else{
						$scope.menudata[Mid].pagePath = url;
						$scope.menudata[Mid].pagePathname = urlname;
						layer.closeAll();
					}
				}
			},
			$scope.menuselectedchange = function(index1){
				$scope.menuselected = index1
			},
			$scope.save = function(type){
				var field = new Object();
				field.id = '{$Request.param.id}'
				field.platform = $scope.platform;
				field.indexurl = $scope.indexurl;
				field.indexurlname = $scope.indexurlname;
				field.backgroundColor = $scope.backgroundColor;
				field.menucount = $scope.menucount;
				field.menudata = $scope.menudata;
				if(field.indexurl == ''){
					dialog('所属页面不能为空');
					return ;
				}
				var index = layer.load();
				$.post("{:url('menu2save')}",{info:field},function(data){
					layer.close(index);
					dialog(data.msg,data.status);
					if(data.status == 1){
						setTimeout(function(){
							parent.layer.closeAll();
							parent.tableIns.reload()
						},1000)
					}
				})
			}
	});
	function chooseLink(urlname,url,args) {
		var $scope = angular.element(document.querySelector('[ng-controller=personCtrl]')).scope();
		$scope.chooseLink(urlname,url,args);
		$scope.$apply();
	}
	</script>
	{include file="public/copyright"/}
</body>
</html>